<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./index.css">
<!-- <link rel="stylesheet" href="./reset.css"> -->
<link rel="stylesheet" href="./iconfont/iconfont.css">

<body>
    <header>
        <span class="logo">9466云专题</span>
        <span class='iconfont icon-yonghu'>&nbsp;&nbsp;龙猫(9466云专题)</span>
    </header>
    <div class="container">
        <aside>
            <div><span class='iconfont icon-shouye'></span>&nbsp;&nbsp;首页</div>
            <div><span class='iconfont icon-UI_icon_zhuantitu'></span>&nbsp;&nbsp;专题</div>
            <div class="active"><span class='iconfont icon-yonghu'></span>&nbsp;&nbsp;用户</div>
            <div><span class='iconfont icon-shezhi'></span>&nbsp;&nbsp;设置</div>
            <div><span class='iconfont icon-rizhi'></span>&nbsp;&nbsp;日志</div>
        </aside>
        <main>
            <div class="inputbox">
                <input type="text" placeholder="搜索用户"> <button>搜索</button>
            </div>
            <button class="add"><span class='iconfont icon-jiahao'></span>&nbsp;&nbsp;添加用户</button>
            <table>
                <thead>
                    <tr>
                        <th>邮箱(用户)</th>
                        <th>姓名</th>
                        <th>电话</th>
                        <th>所属组</th>
                        <th>管理员</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 渲染数据 -->
                </tbody>
            </table>
            <div class="foot">
                <span>上一页</span>
                <span>下一页</span>
            </div>
        </main>
    </div>


</body>

</html>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script> -->
<!-- axios.min.js 文件专门用来发送ajax请求的文件，内部会暴露一个axios对象 -->
<script src="./axios.min.js"></script>
<!-- 自己的js文件 如果想要用axios来发送请求，必须在axios.min.js文件之后引入 -->
<script src="./index.js"></script>

<!-- <script>
    var divEle = document.querySelectorAll('aside div')
    for (let i = 0; i < divEle.length; i++) {
        divEle[i].onclick = function () {
            for (let j = 0; j < divEle.length; j++) {
                divEle[j].classList.remove('active')
            }
            this.className = 'active'
        }
    }

    //生成一个对象 { list:[ {}, {}, 100 ] }
    var data = Mock.mock({
        "list|5": [
            {
                "email": "@email",
                "name": "@cname",
                "phone|13000000000-19999999999": 1,
                "ingroup|+1": ["编辑组", "开发组", '测试组'],
                "isadmin|1": true,
                "status|1": true,
            }
        ]
    })

    //渲染表格数据
    function render(data) {
        var str = data.map((item, index) => {
            return `<tr>
                <td>${item.email}</td>
                <td>${item.name}</td>
                <td>${item.phone}</td>
                <td>${item.ingroup}</td>
                <td>${item.isadmin ? '是' : '否'}</td>
                <td> <span class="statusok">${item.status ? '正常' : '异常'}</span> </td>
                <td> <span class='iconfont icon-bianji'></span> <span  class='iconfont icon-shanchu'></span> </td>
            </tr>`
        }).join('')
        document.querySelector('tbody').innerHTML = str;
    }
    render(data.list)
</script> -->